﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>青鸟租房</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/function.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/axios.min.js"></script>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<style>
		.house-thumb img{
			width: 100px;
			height: 75px;
		}
	</style>
<script type="text/javascript">
		function add(url){
			open("add.html","_self");
		}
		function update(id){
			open("add.html","_self");
		}
		function del(id, page) {
			var isDel = confirm("是否确定删除");
		}
	</script>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo">
			<img src="images/logo.gif" />
		</div>
		<div class="search">
			<a href="login.html">登录</a>
			<a href="register.html">注册</a>
			<label class="ui-green"><input onclick="add()" type="button" name="search" value="发布房屋信息" /></label>
			<label class="ui-green"><input type="button" name="search" value="退       出" onclick='document.location="index.jsp"' /></label>
		</div>
	</div>
	<div class="main wrap">
		<div id="houseArea">
			<table class="house-list">
				<tr v-for=" h in page.records ">
					<td class="house-thumb"><span><a href="page/show.jsp?id=10001"><img :src="h.imgs" /></a></span></td>
					<td>
						<dl>
							<dt>
								<a href="#">{{h.title}}</a>
							</dt>
							<dd>
								{{h.intro}}<br /> 联系方式：{{h.contact}}
							</dd>
						</dl>
					</td>
					<td class="house-type"><label class="ui-green">
						<input type="button" @click='location.href="add.html?id="+h.id' value="修    改" /></label></td>
					<td class="house-price"><label class="ui-green">
						<input type="button" @click='del(h.id)' value="删    除" /></label></td>
				</tr>
			</table>
			<div class="pager">
				<ul>
					<li class="current"><a @click.prevent="query(1,5)" href="#">首页</a></li>
					<li class="current"><a @click.prevent="query(page.current - ( page.current==1? 0 : 1 ), 5)" href="#">上一页</a></li>
					<li class="current"><a @click.prevent="query(page.current + ( page.current==page.pages? 0 : 1 ), 5)"href="#">下一页</a></li>
					<li class="current"><a @click.prevent="query(page.pages,5)"href="#">尾页</a></li>
				</ul>
				<span class="total">{{page.current}}/{{page.pages}}页</span>
			</div>
		</div>
	</div>
	<div id="footer" class="wrap">
		<dl>
			<dt>青鸟租房 &copy; 2015 源辰信息科技有限公司 湘ICP证1000001号</dt>
			<dd>关于我们 · 联系方式 · 意见反馈 · 帮助中心</dd>
		</dl>
	</div>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			//list : []
			page : {}
		},
		methods:{
			query(page,size){
				let url = "/c110s2plyqnzf/house/query?";
				url += page ? '&page='+page : '';
				url += size ? '&size='+size : '';
				axios.get(url)
						.then(res=>this.page = res.data);
			},
			del(id){
				// 扩展  Promise
				this.$confirm("请确认要删除该房屋吗?").then(()=>{
					axios.get("/c110s2plyqnzf/house/deleteById?id="+id)
						.then(res=>{
							if(res.data.code){
								this.$message(res.data.msg);
								this.query();
							} else {
								this.$alert(res.data.msg);
							}
						});
				});
			}
		},
		created(){
			this.query();
		}
	})
</script>
</body>
</html>
